<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>

    </style>
</head>

<body>
    <img id="source" src="./image/ld03.bmp" />
    <img id="mask" src="./image/ld03_m.bmp" />
    <div>
        <canvas id="cvs"></canvas>
    </div>
    <script>
        window.onload = function() {
            handle('destination-in')
        }
        var cvs = document.getElementById('cvs');
        var source = document.getElementById('source');
        var mask = document.getElementById('mask');
        var ctx = cvs.getContext('2d');
        var w, h;

        function handle(type) {
            w = cvs.width = source.width;
            h = cvs.height = source.height;
            ctx.drawImage(mask, 0, 0, w, h);
            var imgData = ctx.getImageData(0, 0, w, h);
            var a = [];
            for (var i = 0; i < imgData.data.length; i += 4) {
                if (imgData.data[i] > 245 &&
                    imgData.data[i + 1] > 245 &&
                    imgData.data[i + 2] > 245) {

                    a.push(i);
                }
            }
            ctx.drawImage(source, 0, 0, w, h);
            imgData = ctx.getImageData(0, 0, w, h);
            for (var i = 0; i < a.length; i++) {
                imgData.data[a[i] + 3] = 0;
            }
            ctx.putImageData(imgData, 0, 0);
        }
    </script>
</body>

</html>